<template>
  <div class="app-container">
    <h2>2.2.3&nbsp;主体结构构件采用国标构件比例</h2>
    <el-card class="evaluation-item" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="number">1.&nbsp;采用国标轧制构件比例(柱) (5分)</span>
        <div class="options">
          <lock
            :_locked="score[0].locked"
            :-pop-over-show="false"
            class="lock"
            @click.native="handleLock(0)"
          />
        </div>
      </div>
      <el-card class="children-question" shadow="never">
        <el-form ref="form1" :model="score[0]" label-width="170px" :rules="rules[0]">
          <el-form-item label="采用国标轧制构件比例" prop="indicator">
            <el-input
              v-model="score[0].indicator"
              style="width:40%"
              placeholder="请输入项目比例"
              @blur="changeScore(0)"
            >
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="得分">
            <span v-if="score[2].type == '模块结构'">7</span>
            <span v-else>{{ score[0].score }}</span>
          </el-form-item>
        </el-form>
      </el-card>
    </el-card>
    <el-card class="evaluation-item" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="number">2.&nbsp;采用国标轧制构件比例(梁) (6分)</span>
        <div class="options">
          <lock
            :_locked="score[1].locked"
            :-pop-over-show="false"
            class="lock"
            @click.native="handleLock(0)"
          />
        </div>
      </div>
      <el-card class="children-question" shadow="never">
        <el-form ref="form1" :model="score[1]" label-width="170px" :rules="rules[0]">
          <el-form-item label="采用国标轧制构件比例" prop="indicator">
            <el-input
              v-model="score[1].indicator"
              style="width:40%"
              placeholder="请输入项目比例"
              @blur="changeScore(1)"
            >
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="得分">
            <span v-if="score[2].type == '模块结构'">7</span>
            <span v-else>{{ score[1].score }}</span>
          </el-form-item>
        </el-form>
      </el-card>
    </el-card>
    <el-card class="evaluation-item" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="number">3.&nbsp;采用国标轧制构件比例（支撑）(3分)</span>
        <div class="options">
          <lock
            :_locked="score[2].locked"
            :-pop-over-show="false"
            class="lock"
            @click.native="handleLock(2)"
          />
        </div>
      </div>
      <el-card class="children-question" shadow="never">
        <el-form ref="form1" :model="score[2]" label-width="170px" :rules="rules[0]">
          <el-form-item label="采用国标轧制构件比例" prop="indicator">
            <el-input
              v-model="score[2].indicator"
              style="width:40%"
              placeholder="请输入项目比例"
              @blur="changeScore(2)"
            >
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="得分">
            <span v-if="score[2].type == '模块结构'">7</span>
            <span v-else>{{ score[2].score }}</span>
          </el-form-item>
        </el-form>
      </el-card>
    </el-card>

    <el-card v-if="false" class="evaluation-item" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="number">2.&nbsp;{{ questionMap[typeIndex].desc }} (7分)</span>
        <div class="options">
          <lock
            :_locked="score[1].locked"
            :-pop-over-show="false"
            class="lock"
            @click.native="handleLock(1)"
          />
        </div>
      </div>
      <el-card class="children-question" shadow="never">
        <el-form ref="form2" :model="score[0]" label-width="170px" :rules="rules[0]">
          <el-form-item label="选择建筑结构种类">
            <el-select v-model="score[2].type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="采用比例" prop="indicator">
            <el-input
              v-model="score[1].indicator"
              style="width:40%"
              placeholder="请输入项目比例"
              @blur="changeScore(1)"
            >
              <template slot="suffix">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="得分">
            <span>{{ score[1].score }}</span>
          </el-form-item>
        </el-form>
      </el-card>
    </el-card>

    <div id="choose">
      <router-link to="/design/evaluate/pre-rate">
        <el-button type="primary" icon="el-icon-arrow-left">上一项</el-button>
      </router-link>

      <router-link to="/design/evaluate/assemble-rate">
        <el-button type="primary" style="margin-left:20px">
          下一项
          <i class="el-icon-arrow-right el-icon--right" />
        </el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
  import Lock from "@/components/Lock";
  import EvaluationStd from "@/components/EvaluationStd";
  import { mapGetters, mapState } from "vuex";
  import { setTimeout } from "timers";

  export default {
    name: "ComponentStandard",
    components: {
      Lock,
      EvaluationStd
    },
    data() {
      return {
        StrTypeMap: {
          "钢框架结构":0,
          "钢框架支撑":0,
          "门式刚架结构":0,
          "筒体结构":1,
          "巨型结构":1,
          "交错桁架结构":2,
          "模块结构":3

        },
        options: [{
          value: '钢框架结构',
          label: '钢框架结构'
        }, {
          value: '钢框架支撑',
          label: '钢框架支撑'
        }, {
          value: '门式刚架结构',
          label: '门式刚架结构'
        }, {
          value: '筒体结构',
          label: '筒体结构'
        }, {
          value: '巨型结构',
          label: '巨型结构'
        },{
          value: '交错桁架结构',
          label: '交错桁架结构'
        },{
          value: '模块结构',
          label: '模块结构'
        },],
        selectIndex: "钢框架结构",
        items: [
          {
            max_score: 5,
            second_score: 3,
            third_score: 2,
          },
          {
            max_score: 6,
            second_score: 4,
            third_score: 2,
          },
          {
            max_score: 3,
            second_score: 2,
            third_score: 1,
          },
        ],
        questionMap: [
          {"desc": "整体吊装单元中包含的节点总数量比例"},
          {"desc": "现场螺栓连接的节点比例"},
          {"desc": "工厂拼装部分节点数量比例"},
          {"desc": "预制模块钢结构重量与建筑钢结构总重量的比例"},
        ],
        rules: [],
        score: []
      };
    },
    computed: {
      ...mapGetters({
        desginSocre: "design",
        eId: "eId",
      }),
      typeIndex() {
        if(this.score[2].type) {
          return this.StrTypeMap[this.score[2].type]
        } else {
          return 0
        }
      }
    },
    created() {
      for (var i = 0; i < this.items.length; i++) {
        this.rules.push({
          indicator: [
            {
              validator: (rule, value, callback) => {
                setTimeout(() => {
                  if (parseFloat(value).toString === "NaN") {
                    callback(new Error("请输入数字"));
                  } else {
                    if (value < 0 || value > 100) {
                      callback(new Error("请输入范围0--100的数字"));
                    } else {
                      callback();
                    }
                  }
                }, 700);
              },
              trigger: "blur"
            }
          ]
        });
      }

      this.$store.dispatch("project/getHistory", this.eId);
      this.score = this.desginSocre._2_2_3;
    },
    beforeDestroy() {
      this.$store.dispatch("project/updateScore", {
        score: this.score,
        phase: "design",
        aspect: "_2_2_3"
      });
    },
    // 最后提交的时候再计算每一个选项的得分
    methods: {
      handleLock(index) {
        this.score[index].locked = !this.score[index].locked;
      },
      changeScore(index) {
        let value = this.score[index].indicator;
        if (value >= 80) {
          this.score[index].score = this.items[index].max_score;
          // this.sum += this.items[index].max_score;
        } else if (value >= 60) {
          this.score[index].score = this.items[index].second_score;
          // this.sum += this.items[index].second_score;
        } else if (value >= 50) {
          this.score[index].score = this.items[index].third_score;
          // this.sum += this.items[index].third_score;
        } else {
          this.score[index].score = 0;
        }
        if(index == 0 && this.score[2].type == "模块结构") {
          this.score[index].score = this.items[index].max_score;
        }
      },
      validate(path) {
        let formKey = ["form1", "form2"]
        for (var i = 0; i < 2; i++) {
          this.$refs[formKey[i]].validate(valid => {
            if (!valid) {
              return false;
            }
          });
        }
        this.$router.push(path);
        return true;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .app-container {
    h2 {
      text-align: center;
    }
    #choose {
      text-align: center;
      margin: 20px auto;
    }
    .evaluation-item {
      width: 60%;
      margin: 10px auto;

      >>> .el-card__header {
        padding: 10px 20px;
      }
      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both;
      }
      .clearfix {
        overflow: hidden;
        position: relative;
        .number {
          font-weight: bold;
          position: absolute;
          bottom: 0;
        }
        .options {
          float: right;
          bottom: 0;
          .lock,
          .evaluation {
            display: inline-block;
          }
        }
      }

      .children-question {
        width: 100%;
        border: none;

        >>> .el-card__header {
          border-bottom: 0px;
          padding: 0px 20px;
        }
        >>> .el-card__body {
          padding: 10px 20px;
        }
      }
    }
  }
</style>
